<template>
  <div id="viewer-use-nodepackage"></div>
</template>

<script>
/**
 *  note 此组件使用npm下的cesium包
 */

import Event from "../common/Event.js";
import "cesium/Widgets/widgets.css";
import * as Cesium from "cesium/Cesium";

export default {
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const viewer = new Cesium.Viewer("viewer-use-nodepackage", {
        terrainProvider: Cesium.createWorldTerrain(),
        imageryProvider: new Cesium.WebMapServiceImageryProvider({
          url: `http://192.168.11.203:8080/geoserver/agcim/wms`,
          layers: "agcim:gz_img",
          parameters: {
            service : 'WMS',
            format: 'image/png',
            transparent: true,
          }
        }),
        timeline: false,
        fullscreenButton: false,
        animation: false,
        navigationInstructionsInitiallyVisible: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        baseLayerPicker: false,
        homeButton: false,
        geocoder: false,
      });
      let scene = viewer.scene;
      let camera = viewer.camera;
      Event.$emit('viewer-camera-changed', camera)
      viewer._cesiumWidget._creditContainer.style.display = "none";
      let gzWMS = new Cesium.WebMapServiceImageryProvider({
          url: `http://192.168.11.203:8080/geoserver/agcim/wms`,
          layers: "agcim:city_Guangzhou",
          parameters: {
            service : 'WMS',
            format: 'image/png',
            transparent: true,
          }
      })
      let gzLayer = new Cesium.ImageryLayer(gzWMS, { alpha: 0.4 })
      viewer.imageryLayers.add(gzLayer)

      camera.lookAt(
          new Cesium.Cartesian3.fromDegrees(113.29, 23.13), 
          new Cesium.HeadingPitchRange(347.9, -31.01, 45000)
      );
      camera.changed.addEventListener(() => {
        Event.$emit("viewer-camera-changed", camera);
      });

      let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);

      let p = null;
      handler.setInputAction(function(evt) {
        console.log(`屏幕坐标：${evt.position}`);
        p = evt.position;

        // 此处获取的result是Cartesian3，世界坐标（以椭球心为原点的右手三维笛卡尔直角坐标系统）
        let result = viewer.scene.globe.pick(
          viewer.camera.getPickRay(p),
          viewer.scene
        );
        console.log(`世界坐标：${result}`);

        // let gcsp = Cesium.Cartographic.fromCartesian(result);
        let gcsp = scene.globe.ellipsoid.cartesianToCartographic(result);
        let wgs84p = [
          (gcsp.longitude / Math.PI) * 180,
          (gcsp.latitude / Math.PI) * 180,
          gcsp.height
        ];
        console.log(`地理坐标：${wgs84p}`);
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    }
  }
};
</script>

<style>
#viewer-use-nodepackage {
  height: 93.5vh;
  background-color: steelblue;
}
</style>